<div style="padding:24px;">
  <p class="page-title" (click)="goTaskList()">
    <i class="anticon anticon-left-circle-o"></i> <span>新建任务</span>
  </p>

  <form nz-form [formGroup]="validateForm">
    <div class="content bg-white">
      <div class="bx-form">
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务名称</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('task_name')" class="bx-form-item_content">
            <nz-input [nzType]="'text'" formControlName="task_name" [nzPlaceHolder]="'请输入任务名称'"
                      [nzSize]="'large'"></nz-input>
            <div nz-form-explain
                 *ngIf="getFormControl('task_name').dirty&&getFormControl('task_name').hasError('required')">请输入任务名称
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('task_name').dirty&&getFormControl('task_name').hasError('maxlength')">
              任务名称不能超过40个字
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务类型</label>
          </div>
          <nz-radio-group formControlName="type" class="bx-form-item_content ml-0" (ngModelChange)="changeType()">
            <label nz-radio [nzValue]="1">
              <span>销售任务</span>
            </label>
            <!--<label nz-radio [nzValue]="2">-->
            <!--<span>曝光任务</span>-->
            <!--</label>-->
          </nz-radio-group>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>选择关键词</label>
          </div>
          <div style="margin-left:100px;">
            <nz-tag (click)="checkTag(item)" style="margin-bottom: 5px;" [nzColor]="item.checked?'#108ee9':''" *ngFor="let item of keywordList">
              {{item.key}}
            </nz-tag>
          </div>
        </div>


        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>分类类型</label>
          </div>
          <div nz-form-control>
            <div nz-col [nzSm]="10" [nzXs]="20">
              <nz-cascader
                [(ngModel)]="_value"
                (ngModelChange)="_console($event)"
                [ngModelOptions]="{standalone: true}"
                [ngModelOptions]="{standalone: true}"
                (nzLoad)="loadData($event)"
                [nzPlaceHolder]="'请选择分类'"
                [ngClass]="{'has-error':categoryError && categoryTouched}"
                [nzAllowClear]="false"
              >
              </nz-cascader>
            </div>
            <div nz-form-explain nz-col class="bx-form-item_content" [nzSm]="24" [nzXs]="24"
                 *ngIf="categoryError && categoryTouched">请输入分类
            </div>
          </div>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>所属活动类型</label>
          </div>
          <div nz-form-control>
            <div nz-col [nzSm]="10" [nzXs]="20">
              <nz-select
                style="width: 200px;"
                [nzPlaceHolder]="'请选择所属活动类型'"
                formControlName="activity_type"
                >
                <nz-option
                  *ngFor="let option of activityTypeOptions"
                  [nzLabel]="option.label"
                  [nzValue]="option.value"
                  [nzDisabled]="option.disabled">
                </nz-option>
              </nz-select>
            </div>
          </div>
        </div>


        <!--<div nz-form-item nz-row>-->
        <!--<div nz-form-label class="bx-form-item_label">-->
        <!--<label>展示主图</label>-->
        <!--</div>-->
        <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">-->
        <!--<div>-->
        <!--<app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo"-->
        <!--(piclistChange)="fileChange()"-->
        <!--(fileListChange)="fileChange()"></app-upload>-->
        <!--</div>-->
        <!--<div nz-form-explain *ngIf="picError">请至少上传一张图片</div>-->
        <!--</div>-->

        <!--</div>-->


        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务商品或活动</label>
          </div>
          <div class="bx-form-item_content" nz-form-control
               [nzValidateStatus]="getFormControl('task_content_relation_id')">
            <div class="goods-content">
              <div class="init-content" *ngIf="!picked.type" nz-form-control
                   [nzValidateStatus]="getFormControl('task_content_relation_id')">
                <button nz-button [nzType]="'primary'" (click)="openDialog()">
                  <span><i class="anticon anticon-plus"></i>添加商品或活动</span>
                </button>
              </div>

              <div *ngIf="picked.type === 'goods'">
                <div class="goods-content-info">
                  <div class="goods-content-photo"><img
                    src="{{picked.info.first_picture?aliyunOssOutputUrl+'/'+picked.info.first_picture:''}}"></div>
                  <div class="goods-content-name">{{picked.info.name}}</div>
                </div>
                <div class="goods-content-detail">
                  <div>
                    <div><span class="title">售价</span><span class="price">￥{{picked.info.price/1000}}</span></div>
                  </div>
                  <div>
                    <div><span class="title control-width">商品库存</span><span
                      class="info">{{picked.info.in_stock}}</span>
                    </div>
                    <div><span class="title control-width">商品ID</span><span class="info">{{picked.info.id}}</span>
                    </div>
                  </div>
                  <div>
                    <button nz-button [nzType]="'primary'" (click)="openDialog()">
                      <span>更改内容</span>
                    </button>
                  </div>
                </div>
              </div>

              <div *ngIf="picked.type === 'activity'">
                <div class="goods-content-info">
                  <div class="goods-content-photo"><img
                    src="{{picked.info.activity_goods[0].goods.first_picture?aliyunOssOutputUrl+'/'+picked.info.activity_goods[0].goods.first_picture:''}}">
                  </div>
                  <div class="goods-content-name"><span class="activity-tips">{{picked.info.groupType}}</span>{{picked.info.name}}
                  </div>
                </div>
                <div class="goods-content-detail">
                  <div>
                    <nz-popover [nzTitle]="'活动商品'">
                      <span class="title">活动商品</span><a href="javascript:;" nz-popover><i
                      class="anticon anticon-file-text"></i> 查看商品</a>
                      <ng-template #nzTemplate>
                        <div class="tip-goods-item" *ngFor="let item of picked.info.activity_goods;let i = index;">
                          <span class="tip-goods-text" style="width: 70px;">活动商品{{i+1}}:</span>
                          <span class="tip-goods-text" style="width: 240px;">{{item.goods_name}}</span>
                          <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥{{item.activity_goods_sku[0].price/1000}}</span></span>
                        </div>
                      </ng-template>
                    </nz-popover>
                    <div><span class="title">活动有效期</span> 从{{picked.info.start_date}}至{{picked.info.end_date}}</div>
                  </div>
                  <div>
                    <div><span class="title">商品ID</span> {{picked.info.activity_goods[0].goods.id}}</div>
                  </div>
                  <div>
                    <button nz-button [nzType]="'primary'" (click)="openDialog()">
                      <span>更改内容</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <nz-input [nzType]="'text'" formControlName="task_content_relation_id" [nzPlaceHolder]="'请输入任务名称'"
                      [nzSize]="'large'" hidden></nz-input>
            <div nz-form-explain
                 *ngIf="getFormControl('task_content_relation_id').dirty&&getFormControl('task_content_relation_id').hasError('required')">
              请输入任务名称
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务有效期</label>
          </div>
          <div>
            <span nz-form-control [nzValidateStatus]="getFormControl('validity_start')" class="date-pick-box">
              <nz-datepicker
                [nzSize]="'large'"
                style="width: 100%;"
                (ngModelChange)="_startDate=$event;_startValueChange()"
                [ngModel]="_startDate"
                [nzShowTime]="true"
                [nzDisabledDate]="_disabledStartDate"
                [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                formControlName="validity_start"
                [nzPlaceHolder]="'开始时间'"></nz-datepicker>
              <div nz-form-explain
                   *ngIf="getFormControl('validity_start').dirty&&getFormControl('validity_start').hasError('required')">请输入起始时间</div>
            </span>
            <span nz-form-control [nzValidateStatus]="getFormControl('validity_end')" class="date-pick-box">
              <nz-datepicker
                [nzSize]="'large'"
                style="width: 100%;"
                (ngModelChange)="_endDate=$event;_endValueChange();endDateValidators=false;"
                [ngModel]="_endDate"
                [nzDisabledDate]="_disabledEndDate"
                [nzShowTime]="true"
                [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                formControlName="validity_end"
                [nzPlaceHolder]="'结束时间'"></nz-datepicker>
              <div nz-form-explain
                   *ngIf="getFormControl('validity_end').dirty&&getFormControl('validity_end').hasError('required')">请输入结束时间</div>
              <div nz-form-explain
                   *ngIf="getFormControl('validity_end').dirty&&getFormControl('validity_end').hasError('required') && endDateValidators">结束时间不得小于当前时间</div>
            </span>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务积分</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('point')" class="bx-form-item_content">
            <nz-input-number style="width: 155px;"
                             [nzMin]="0"
                             formControlName="point"
                             [nzPlaceHolder]="'请输入任务积分'"
                             (nzBlur)="getLevel()"
                             [nzSize]="'large'"></nz-input-number>
            <span class="prompt">所需推客等级{{level}}</span>
            <div nz-form-explain *ngIf="getFormControl('point').dirty&&getFormControl('point').hasError('required')">
              请输入任务积分
            </div>
            <div nz-form-explain *ngIf="getFormControl('point').dirty&&getFormControl('point').hasError('min')">
              请输入大于0的正整数
            </div>
            <div nz-form-explain *ngIf="getFormControl('point').dirty&&getFormControl('point').hasError('max')">
              请输入小于99999999的正整数
            </div>
            <div nz-form-explain *ngIf="getFormControl('point').dirty&&getFormControl('point').hasError('lower')">
              销售任务积分不得小于100
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务完成上限</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('max_completion_times')"
               class="bx-form-item_content">
            <nz-input-number style="width: 155px;" [nzMin]="0" formControlName="max_completion_times"
                             [nzPlaceHolder]="'请输入任务完成上限'" [nzSize]="'large'"></nz-input-number>
            <span class="prompt">填0表示无上限</span>
            <div nz-form-explain
                 *ngIf="getFormControl('max_completion_times').dirty&&getFormControl('max_completion_times').hasError('required')">
              请输入任务完成上限
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('max_completion_times').dirty&&getFormControl('max_completion_times').hasError('min')||getFormControl('max_completion_times').hasError('max')">
              请输入大于等于0小于99999999的整数
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-control class="bx-form-item_content">
            <button nz-button [nzType]="'primary'" [disabled]="!validateForm.valid || categoryError" [nzLoading]="addStatus"
                    (click)="addTask()">{{ addStatus ? '添加中' :'添加' }}
            </button>
            <!--<button nz-button [nzType]="'primary'" (click)="addTask()">完成</button>-->
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品或活动'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnOk)="confirmChecked()"
  (nzOnCancel)="goodsModalVisible = false;">
  <ng-template #modalContent>
    <div class="operate-line clearfix">
      <div class="text-left">
        <nz-radio-group [(ngModel)]="pickType" class="fl" (ngModelChange)="pickTypeChange($event)">
          <label nz-radio-button [nzValue]="'goods'">
            <span>添加商品</span>
          </label>
          <label nz-radio-button [nzValue]="'activity'">
            <span>添加活动</span>
          </label>
        </nz-radio-group>
      </div>
      <!--<nz-input-->
        <!--style="width: 200px;float: right;"-->
        <!--[nzType]="'search'"-->
        <!--name="goodsName"-->
        <!--[(ngModel)]="searchGoodsName"-->
        <!--[nzPlaceHolder]="'输入商品名称'"-->
        <!--(nzBlur)="getGoodsList()"-->
        <!--*ngIf="pickType === 'goods'"-->
      <!--&gt;</nz-input>-->
      <!--<button nz-button [nzType]="'primary'" [nzSize]="'large'" style="margin-left:22px;" (click)="getGoodsList();">-->
        <!--查 询-->
      <!--</button>-->
      <!--&lt;!&ndash;<button nz-button class="ml-7" (click)="name='';getList(true)" [nzSize]="'large'">重 置</button>&ndash;&gt;-->
      <!--<nz-input-->
        <!--style="width: 200px;float: right;"-->
        <!--[nzType]="'search'"-->
        <!--name="taskName"-->
        <!--[(ngModel)]="searchTaskName"-->
        <!--(nzBlur)="getActivityList()"-->
        <!--[nzPlaceHolder]="'输入任务名称'"-->
        <!--*ngIf="pickType === 'activity'"-->
      <!--&gt;</nz-input>-->
      <div class="text-right">
        <button nz-button
                style="margin-left:10px;float:right;"
                *ngIf="pickType === 'goods'"
                (click)="reset(1)"
                [nzSize]="'large'">重 置</button>
        <button nz-button [nzType]="'primary'"
                *ngIf="pickType === 'goods'"
                [nzSize]="'large'"
                style="margin-left:10px;float:right;"
                (click)="getGoodsList();">
          查 询
        </button>
        <nz-input
          style="width: 200px;float: right;"
          [nzSize]="'large'"
          name="goodsName"
          [(ngModel)]="searchGoodsName"
          [nzPlaceHolder]="'输入商品名称'"
          (keydown)="keyDown($event,1)"
          *ngIf="pickType === 'goods'"
        ></nz-input>
        <button nz-button
                style="margin-left:10px;float:right;"
                *ngIf="pickType === 'activity'"
                (click)="reset(2)"
                [nzSize]="'large'">重 置</button>
        <button nz-button [nzType]="'primary'"
                *ngIf="pickType === 'activity'"
                [nzSize]="'large'"
                style="margin-left:10px;float:right;"
                (click)="getActivityList();">
          查 询
        </button>
        <nz-input
          style="width: 200px;float: right;"
          name="taskName"
          [nzSize]="'large'"
          [(ngModel)]="searchTaskName"
          [nzPlaceHolder]="'输入任务名称'"
          (keydown)="keyDown($event,2)"
          *ngIf="pickType === 'activity'"
        ></nz-input>
      </div>

    </div>
    <nz-table #nzTable
              [nzAjaxData]="goodsData"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal]="total"
              (nzPageIndexChange)="pageChange()"
              *ngIf="pickType === 'goods'">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox></th>
        <th nz-th><span>商品ID</span></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>商品名称</span></th>
        <th nz-th><span>商品价格</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of goodsData">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="checkedSingle($event,data)" [(ngModel)]="data.checked">
          </label>
        </td>
        <td nz-td>{{data.id}}</td>
        <td nz-td><img src="{{data.first_picture?aliyunOssOutputUrl+'/'+data.first_picture:''}}" alt=""></td>
        <td nz-td style="width: 200px">{{data.name}}</td>
        <td nz-td>{{data.price/1000}}</td>
        <td nz-td>{{data.in_stock}}</td>
      </tr>
      </tbody>
    </nz-table>
    <nz-table #nzTable
              [nzAjaxData]="activityData"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal]="total"
              (nzPageIndexChange)="pageChange()"
              *ngIf="pickType === 'activity'">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox></th>
        <th nz-th><span>活动ID</span></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>活动名称</span></th>
        <th nz-th><span>活动有效期</span></th>
        <th nz-th><span>活动商品</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of activityData">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="checkedSingle($event,data)" [(ngModel)]="data.checked">
          </label>
        </td>
        <td nz-td>{{data.id}}</td>
        <td nz-td><img
          src="{{data.activity_goods[0]?aliyunOssOutputUrl+'/'+data?.activity_goods[0]?.goods.first_picture:''}}"
          alt=""></td>
        <td nz-td style="width: 200px"><span class="activity-tips">{{data.groupType}}</span>{{data.name}}</td>
        <td nz-td>{{data.start_date}}-{{data.end_date}}</td>
        <td nz-td>
          <nz-popover [nzTitle]="'活动商品'">
            <a href="javascript:;" nz-popover>查看商品</a>
            <ng-template #nzTemplate>
              <div class="tip-goods-item" *ngFor="let item of data.activity_goods;let i = index;">
                <span class="tip-goods-text" style="width: 70px;">活动商品{{i+1}}:</span>
                <span class="tip-goods-text" style="width: 240px;">{{item.goods_name}}</span>
                <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥{{item.activity_goods_sku[0].price/1000}}</span></span>
              </div>
            </ng-template>
          </nz-popover>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->
